.topx{position:relative; z-index:888;}
.topx-content{position:relative; margin-top:-88px;}
.topx-content:before{position:absolute; content:''; top:-38px; left:-38px; right:-38px; border-radius:18px; bottom:0; background:#fff;}
.topx-content:after{display:block; content:''; clear:both;}
.topx-list{margin:0 -14px;}
.topx-item{position:relative; z-index:8; float:left; width:25%; padding:0 14px;}
.topx-item>div{background:#f8f8f8; padding:38px 28px; position:relative;}
.topx-item>div>i{font-size:38px; margin-right:8px; color:#f20f0f;}
.topx-item>div>b{font-size:36px;}
.topx-item>div>h3{font-size:20px; margin:18px 0 8px 0;} 
.topx-item>div>ul:after{display:block; content:''; clear:both;}
.topx-item>div>ul>li{float:left; min-width:50%; position:relative; padding-left:18px; margin-top:18px; font-size:16px; color:#686868;}
.topx-item>div>ul>li:before{position:absolute; width:6px; height:6px; border-radius:6px; opacity:0.8; content:''; left:0; top:50%; margin-top:-3px; background:#f20f0f;}
.topx-item>div>span{display:block; margin-top:28px;}
.topx-item>div>span:after{display:block; content:''; clear:both;}
.topx-item>div>span>a{float:left; overflow:hidden; line-height:36px; padding:0 18px; border-radius:3px; color:#fff; background:#f20f0f;}
.topx-item>div>span>a>b{font-weight:normal; position:relative; z-index:1;}
.topx-item>div>span>a:hover{background:#fff; color:#f20f0f;}
@media(max-width:1200px){
.topx-content{margin-top:0; padding-top:38px;}
.topx-content:before{display:none;}
.topx-list{margin:0 -10px;}
.topx-item{width:50%; padding:10px;}
}
@media(max-width:767px){
.topx-content{padding-top:18px;}
.topx-list{margin:0;}
.topx-item{width:100%; padding:4px 0;}
.topx-item>div{padding:16px;}
.topx-item>div>i{font-size:28px; margin-right:4px;}
.topx-item>div>b{font-size:26px;}
.topx-item>div>h3{font-size:16px; margin:12px 0 4px 0;} 
.topx-item>div>ul>li{padding-left:12px; margin-top:12px; font-size:14px;}
.topx-item>div>span{margin-top:18px;}
}


.intx{position:relative; margin-top:38px;}
.intx-content{display:block; background:url('../../upload/photo/202309/150031444.jpg') #000; background-size:cover; padding:48px; color:#fff;}
.intx-content:after{display:block; content:''; clear:both;}
.intx-text{width:50%; float:left;}
.intx-text>span{display:block; margin-top:48px;}
.intx-text>span>a{display:inline-block; border-radius:3px; padding:8px 38px; font-size:16px;}
.intx-text>span>a:first-child{background:#fff; margin-right:18px;}
.intx-text>span>a:last-child{color:#fff; background:#f20f0f;}
.intx-text>h3{font-size:38px; margin:0 0 28px 0;}
.intx-text>h3>b{color:#f20f0f;}
.intx-text>p{font-size:16px; line-height:2;}
.intx-text>h4{font-size:28px; font-weight:normal; margin:28px 0 0 0;}
.intx-text>div{margin-top:38px;}
.intx-text>div:after{display:block; content:''; clear:both;}
.intx-text>div>a{float:left; overflow:hidden; line-height:42px; position:relative; padding:0 38px; border-radius:3px; background:#fff;}
.intx-text>div>a>b{font-weight:normal; position:relative; z-index:1; font-size:15px;}
.intx-text>div>a:hover{color:#fff; }
.intx-text>div>a:after{position:absolute; left:100%; top:100%; content:''; width:0; height:0; border-radius:50%; transition:0.6s; transform:translate(-50%,-50%); background:#f20f0f;}
.intx-text>div>a:hover:after{width:300px; height:300px;}
.intx-list{width:50%; float:left; padding-left:28px;}
.intx-swiper{width:600px; margin:0 auto; max-width:100%; overflow:hidden; position:relative; width:480px;}
.intx-outer{width:10000%;}
.intx-item{float:left; width:1%;}
.intx-item img{width:100%; display:block;}
.intx-item b{display:block; margin-top:16px; font-size:18px; color:#fff;}
.intx-prev,
.intx-next{position:absolute; z-index:8; top:50%; width:48px; height:48px; line-height:48px; text-align:center; margin-top:-18px; background:rgba(0,0,0,0.28); cursor:pointer; opacity:0; transition:0.3s;}
.intx-swiper:hover .intx-prev,
.intx-swiper:hover .intx-next{opacity:1;}
.intx-prev i,
.intx-next i{color:#fff; font-size:48px;}
.intx-prev:hover i,
.intx-next:hover i{color:#f20f0f;}
.intx-prev{left:0;}
.intx-next{right:0;}
@media(max-width:1200px){
.intx-text{width:100%; float:none;}
.intx-content{padding:38px;}
.intx-list{width:100%; float:none; padding-left:0; padding-top:38px;}
.intx-swiper{margin:0;}
}
@media(max-width:767px){
.intx{margin-top:18px;}
.intx-content{padding:16px;}
.intx article{padding:0;}
.intx-text>h3{font-size:28px; margin-bottom:18px;}
.intx-text>p{font-size:14px; line-height:1.5;}
.intx-text>h4{font-size:22px; margin-top:18px;}
.intx-text>div{margin-top:28px;}
.intx-text>div>a{line-height:36px; padding:0 28px;}
.intx-item b{margin-top:8px; font-size:16px;}
}

.case{padding:50px 0;}
.case-content{display:block; margin:0 -12px;}
.case-content:after{display:block; content:''; clear:both;}
.case-title{padding-bottom:28px;}
.case-title>b{display:block; font-size:38px; line-height:1; color:#989898;}
.case-title>b>u{position:relative; text-decoration:none; padding-right:8px; color:#f20f0f;}
.case-title>b>i{font-style:normal; display:inline-block; position:relative;}
.case-title>b>u:before{position:absolute; left:100%; top:50%; width:48px; height:8px; content:''; opacity:0.2; background:#f20f0f;}
.case-title>p{font-size:38px; line-height:1; margin:12px 0 0;}
.case-title>p>b{display:inline-block; padding-right:4px;}
.case-item{float:left; width:33.333%; padding:12px;}
.case-item>a>div{position:relative; overflow:hidden;}
.case-item>a>div>img{width:100%; display:block; transition:2.8s;}
.case-item>a>div>span{position:absolute; z-index:1; top:0; right:0; bottom:0; left:0; color:#fff; overflow:hidden; transition:.3s; transform:scale(0); opacity:0; visibility:hidden; padding:28px; background:rgba(0,0,0,0.68);}
.case-item>a>div>span>b{display:block; font-size:28px;}
.case-item>a>div>span>em{display:block; margin:28px 0; font-style:normal; font-size:15px;}
.case-item>a>div>span>u{display:block; text-decoration:none;}
.case-item>a>div>span>u ins{margin-left:2px;}
.case-item>a>span{display:block; padding:8px 0;}
.case-item>a>span:after{display:block; content:''; clear:both;}
.case-item>a>span>b{float:left; font-size:21px;}
.case-item>a>span>u{float:right; text-decoration:none; padding:4px 8px 0 0; color:#686868;}
.case-item>a>span>u>i{transition:.2s; display:inline-block;}
.case-item>a>span>u>ins{display:inline-block; margin-left:2px;}
.case-item>a:hover>div>img{transform:scale(1.08);}
.case-item>a:hover>div>span{transform:scale(1); opacity:1; visibility:visible;}
.case-more{text-align:center; font-size:0; margin-top:18px;}
.case-more>a{display:inline-block; overflow:hidden; position:relative; border:1px solid #d8d8d8; border-radius:3px; padding:12px 38px;}
.case-more>a:after{position:absolute; z-index:1; left:100%; top:100%; content:''; width:0; height:0; border-radius:50%; transition:0.6s; transform:translate(-50%,-50%); background:#f20f0f;}
.case-more>a>u{position:relative; z-index:2; display:inline-block; text-decoration:none; font-size:16px;}
.case-more>a>i{position:relative; z-index:2; font-size:18px; transition:0.3s; margin-left:8px;}
.case-more>a:hover{color:#fff; border-color:#f20f0f;}
.case-more>a:hover:after{width:500px; height:500px;}
.case-more>a:hover>i{color:#fff; transform:translateX(8px);}
@media(max-width:1200px){
.case-item{width:50%;}
}
@media(max-width:992px){
.case{padding:38px 0;}
.case-content{margin:0 -8px;}
.case-item{padding:8px;}
.case-item>a>span>b{font-size:18px;}
.case-item>a>div>span{padding:18px;}
.case-item>a>div>span>b{display:block; font-size:20px;}
.case-item>a>div>span>em{margin:12px 0; font-size:14px;}
}
@media(max-width:767px){
.case{padding:18px 0;}
.case-title{padding-bottom:16px;}
.case-title>b{font-size:28px;}
.case-title>b>u{padding-right:4px;}
.case-title>b>u:before{width:38px; height:6px;}
.case-title>p{font-size:28px; margin:8px 0 0;}
.case-title>p>b{padding-right:2px;}
.case-content{margin:0;}
.case-item{width:100%; padding:4px;}
.case-item>a>span>b{font-size:18px;}
.case-item>a>span>u{padding-top:0;}
.case-more{margin-top:8px;}
.case-more>a{padding:8px 28px;}
.case-more>a>u{font-size:14px;}
.case-more>a>i{font-size:16px; margin-left:6px;}
.case-more>a:hover:after{width:400px; height:400px;} 
.case-more>a:hover>i{transform:translateX(4px);}
}

.news{padding:50px 0; background-color:#f8f8f8; background-image:url('');}
.news-title{padding-bottom:28px;}
.news-title>b{display:block; font-size:38px; line-height:1; color:#989898;}
.news-title>b>u{position:relative; text-decoration:none; padding-right:8px; color:#f20f0f;}
.news-title>b>i{font-style:normal; display:inline-block; position:relative;}
.news-title>b>u:before{position:absolute; left:100%; top:50%; width:48px; height:8px; content:''; opacity:0.2; background:#f20f0f;}
.news-title>p{font-size:38px; line-height:1; margin:12px 0 0;}
.news-title>p>b{display:inline-block; padding-right:4px;}
.news-content{display:block; margin:0 -8px;}
.news-content:after{display:block; content:''; clear:both;}
.news-item{float:left; width:33.333%; padding:8px;}
.news-item>a>ins{float:right; background:#f8f8f8; text-align:center; margin-left:18px; transition:.4s;}
.news-item>a>ins>i{font-style:normal; display:block; font-size:28px;}
.news-item>a>ins>u{text-decoration:none; display:block; padding:2px 8px; font-size:14px; background:rgba(0,0,0,0.06);}
.news-item:first-child>a>ins{position:absolute; top:18px; left:0;}
.news-item:first-child>a>ins,
.news-item>a:hover>ins{color:#fff; background:#f20f0f;}
.news-item>a>img{display:block; width:100%; height:328px; object-fit:cover;}
.news-item>a>h2{position:absolute; left:18px; bottom:18px; right:18px; padding:28px 18px; background:#fff;}
.news-item>a{display:block; background:#fff; position:relative; padding:28px; overflow:hidden;}
.news-item:first-child>a{padding:0;}
.news-item>a>h3{display:block; height:24px; margin-bottom:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.news-item>a>p{display:block; height:21px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#686868;}
.news-item>a>u{display:inline-block; height:21px; margin-top:16px; color:#f20f0f;}
.news-item>a>u>b{transition:.2s; font-weight:normal; font-size:14px; display:inline-block; color:#181818; padding-right:6px;}
.news-item>a>u>i{transition:.2s; font-size:18px; display:inline-block; vertical-align:middle;}
.news-item>a:hover{transform:translateY(-2px); box-shadow:0 2px 8px rgba(0,0,0,0.18);}
.news-item>a:hover>u>b{transform:translateX(4px); color:#f20f0f;}
.news-item>a:hover>u>i{transform:translateX(8px);}
.news-more{text-align:center; font-size:0; margin-top:18px;}
.news-more>a{display:inline-block; overflow:hidden; position:relative; background:#fff; border-radius:3px; padding:12px 38px;}
.news-more>a:after{position:absolute; z-index:1; left:100%; top:100%; content:''; width:0; height:0; border-radius:50%; transition:0.6s; transform:translate(-50%,-50%); background:#f20f0f;}
.news-more>a>u{position:relative; z-index:2; display:inline-block; text-decoration:none; font-size:16px;}
.news-more>a>i{position:relative; z-index:2; font-size:18px; transition:0.3s; margin-left:8px;}
.news-more>a:hover{color:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.18);}
.news-more>a:hover:after{width:500px; height:500px;}
.news-more>a:hover>i{color:#fff; transform:translateX(8px);}
@media(max-width:1200px){
.news{padding:30px 0;}
.news-item{width:50%;}
.news-item:last-child{display:none;}
}
@media(max-width:767px){
.news{padding:18px 0;}
.news-content{margin:0;}
.news-title{padding-bottom:16px;}
.news-title>b{font-size:28px;}
.news-title>b>u{padding-right:4px;}
.news-title>b>u:before{width:38px; height:6px;}
.news-title>p{font-size:28px; margin:8px 0 0;}
.news-title>p>b{padding-right:2px;}
.news-item{width:100%; padding:4px;}
.news-item:last-child{display:block;}
.news-item>a{padding:12px;}
.news-item>a>img{height:228px;}
.news-item>a>h2{left:8px; bottom:8px; right:8px; padding:12px 8px; font-size:16px;}
.news-item>a>ins{margin-left:8px;}
.news-item>a>ins>u{font-size:12px; padding:2px 6px;}
.news-item:first-child>a>ins{top:8px; margin-left:8px;}
.news-more{margin-top:8px;}
.news-more>a{padding:8px 28px;}
.news-more>a>u{font-size:14px;}
.news-more>a>i{font-size:16px; margin-left:6px;}
.news-more>a:hover:after{width:400px; height:400px;} 
.news-more>a:hover>i{transform:translateX(4px);}
}

.join{padding:58px 0;}
.join-text{float:left; width:33.333%;}
.join-text h4{display:block; font-weight:normal; font-size:18px; margin-bottom:18px;}
.join-text h3{display:block; font-weight:normal; font-size:28px;}
.join-title{padding-bottom:28px;}
.join-title>b{display:block; font-size:38px; line-height:1; color:#989898;}
.join-title>b>u{position:relative; text-decoration:none; padding-right:8px; color:#f20f0f;}
.join-title>b>i{font-style:normal; display:inline-block; position:relative;}
.join-title>b>u:before{position:absolute; left:100%; top:50%; width:48px; height:8px; content:''; opacity:0.2; background:#f20f0f;}
.join-title>p{font-size:38px; line-height:1; margin:12px 0 0;}
.join-title>p>b{display:inline-block; padding-right:4px;}
.join-list{float:right; width:66.666%;}
.join-list ul{margin:-16px -8px 0 -8px}
.join-list li{width:25%; float:left; padding:16px 8px 0 8px;}
.join-list li img{display:block; width:100%; height:108px; border:1px solid #e8e8e8; transition:.2s; object-fit:cover;}
.join-list li a:hover img{border-color:#f20f0f;}
@media(max-width:1200px){
.join{padding:38px 0;}
.join-text{width:100%;}
.join-list{width:100%; margin-top:38px;}
}
@media(max-width:767px){
.join{padding:18px 0;}
.join-title{padding-bottom:16px;}
.join-title>b{font-size:28px;}
.join-title>b>u{padding-right:4px;}
.join-title>b>u:before{width:38px; height:6px;}
.join-title>p{font-size:28px; margin:8px 0 0;}
.join-title>p>b{padding-right:2px;}
.join-list{margin-top:18px;}
.join-list li{width:50%;}
.join-list ul{margin:-8px -4px 0 -4px}
.join-list li{padding:8px 4px 0 4px;}
.join-list li img{height:88px;}
}

.tact{padding:58px 0;}
.join+.tact{padding-top:0;}
.tact-content{display:block; background:url('../../upload/photo/202309/150031444.jpg') center #000; background-size:cover; padding:48px; color:#fff;}
.tact-content:after{display:block; content:''; clear:both;}
.tact-text{float:left; width:50%;}
.tact-text>h2{font-size:38px;}
.tact-text>h2 b{color:#f20f0f;}
.tact-text>p{font-size:18px; margin:18px 0 0;}
.tact-text>h3{font-size:28px; margin:38px 0 0;}
.tact-text>h4{display:block; margin:8px 0 0; font-weight:normal; font-size:38px;}
.tact-text>h4 u{text-decoration:none; display:inline-block; animation:fbu 2s infinite;}
.tact-text>div{margin-top:18px;}
.tact-text>div:after{display:block; content:''; clear:both;}
.tact-text>div a{float:left; position:relative; color:#fff; border-radius:40px; overflow:hidden; background:#f20f0f;}
.tact-text>div a:after{position:absolute; left:100%; top:100%; content:''; width:0; height:0; border-radius:50%; transition:0.6s; transform:translate(-50%,-50%); background:#fff;}
.tact-text>div a>i{float:left; position:relative; z-index:2; width:36px; height:36px; line-height:36px; text-align:center; transition:0.6s; font-size:18px; margin:2px; border-radius:40px; background:#fff; color:#f20f0f;}
.tact-text>div a>u{float:left; position:relative; z-index:1; text-decoration:none; line-height:40px; height:40px; padding:0 28px 0 16px;}
.tact-text>div a:hover{color:#f20f0f;}
.tact-text>div a:hover>i{color:#fff; animation:szu 2s infinite; background:#f20f0f;}
.tact-text>div a:hover:after{width:300px; height:300px;}
.tact-form{float:left; width:50%;}
.tact-form>div{max-width:480px; margin:auto;}
.tact-form h2{font-size:28px; font-weight:normal; margin-bottom:18px;}
.tact-form dt{display:none;}
.tact-form dd{position:relative; margin-bottom:18px;}
.tact-form dd>p{display:none;}
.tact-form select,
.tact-form textarea,
.tact-form input[type=file],
.tact-form input[type=text],
.tact-form input[type=password],
.tact-form input[type=number],
.tact-form input[type=tel],
.tact-form input[type=email]{background:rgba(255,255,255,.18); border-radius:0; border:none; padding:10px 18px; line-height:24px; height:44px; font-size:15px; color:#fff;}
.tact-form textarea{height:108px;}
.tact-form .form888 span.captcha{position:relative; width:268px; max-width:100%; display:block;}
.tact-form .form888 span.captcha i>img{position:absolute; right:6px; top:6px; background:rgba(255,255,255,0.88); padding:1px; cursor:pointer;}
.tact-form div.file_input>i{background:rgba(0,0,0,0.38); border:none;}
.tact-form select option{color:#181818;}
.tact-form button{color:#fff; border:none; line-height:44px; padding:0 38px; font-size:16px; border-radius:3px; cursor:pointer; transition:.3s; background:#f20f0f;}
.tact-form button:hover{background:#fff; color:#f20f0f;}
.tact-form *::-webkit-input-placeholder{color:#fff; opacity:1;}
.tact-form *::-moz-input-placeholder{color:#fff; opacity:1;}
.tact-form *::-ms-input-placeholder{color:#fff; opacity:1;}
@media(max-width:1200px){
.tact{padding:38px 0;}
.tact-text{width:100%;}
.tact-form{width:100%;}
.tact-form>div{margin:38px 0 0;}
}
@media(max-width:767px){
.tact{padding:18px 0;}
.tact article{padding:0;}
.tact-content{padding:16px;}
.tact-text>h2{font-size:28px;}
.tact-text>p{font-size:16px; margin:12px 0 0;}
.tact-text>h3{font-size:18px; margin:28px 0 0;}
.tact-form h2{font-size:22px;}
}
@keyframes fbu{
50%{transform:scale(1);}
60%{transform:scale(1.04);}
70%{transform:scale(1);}
80%{transform:scale(1.02);}
85%{transform:scale(1);}
}
@keyframes szu{
from{transform:rotate(0);}
to{transform:rotate(360deg);}
}
